<!-- 角色编辑弹窗 -->
<template>
  <div class="drawerDetail">
    <el-drawer :visible="drawerEditBoolen"
               size="50%"
               :before-close="handleClose"
               ref="drawer"
               :with-header="false">
      <!-- 订单信息 -->
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>基本信息</span>
        </div>
        <div class="">
          <div style="padding: 10px 0;">二级分类名称: {{ orderInfoData?.name }}</div>
          <div style="padding: 10px 0;">搭子标题: {{orderInfoData?.title}}</div>

          <div style="padding: 10px 0;"> 搭子创建者: <img class="avaterName"
                 :src="orderInfoData.avatar"
                 alt="" /> {{ orderInfoData?.nickname}} </div>
          <div style="padding: 10px 0;">性别类型:{{( orderInfoData?.sex==0||orderInfoData?.sex==1?'性别不限':'性别比例'  )}}</div>
          <div style="padding: 10px 0;">活动地点: {{ orderInfoData?.address}}</div>
          <div style="padding: 10px 0;">需求标签: {{orderInfoData?.label  }}</div>
          封面图:
          <div class="flex-start-center-wrap">
            <div v-for="(item, index) in this.orderInfoData?.img"
                 :key="index">
              <img @click="imgScare(item)"
                   class="lifeImg"
                   :src="item"
                   alt="" />
            </div>
          </div>
          背景图:
          <div class="flex-start-center-wrap"
               v-if="this.orderInfoData?.cover_img.length">
            <div v-for="(item, index) in this.orderInfoData?.cover_img"
                 :key="index">
              <img @click="imgScare(item)"
                   class="lifeImg"
                   :src="item"
                   alt="" />
            </div>
          </div>
          <div v-else>暂无图片</div>
          <div style="padding: 10px 0;"
               v-if="orderInfoData?.sex==0||orderInfoData?.sex==1">价格: {{orderInfoData?.price  }}{{configBS?.currency_name }}</div>
          <div style="padding: 10px 0;"
               v-if="orderInfoData?.sex==2">价格: 男生参与搭子费用{{ configBS?.currency_name }} <span style="color: red;">{{orderInfoData?.man_price}}</span>,女生参与搭子费用{{ configBS?.currency_name }} <span style="color: red;">{{orderInfoData?.woman_price}}</span></div>
          <div v-if="orderInfoData?.sex==0||orderInfoData?.sex==1"
               style="padding: 10px 0;">参与人数: {{orderInfoData?.participants_number}}(人),总计: {{orderInfoData?.people_number}}(人)</div>

          <div v-if="orderInfoData?.sex==2"
               style="padding: 10px 0;">参与人数: 男生参与:{{orderInfoData?.man_participants_number}} 女生参与:{{ orderInfoData?.woman_participants_number }},总计: {{(orderInfoData?.man_number+orderInfoData?.woman_number)}}人</div>
          <div style="padding: 10px 0;">描述:<tinymce-editor ref="editorRef"
                            :init="editorConfig"
                            v-model="orderInfoData.describe" /></div>

          <div style="padding: 10px 0;">手机号:{{orderInfoData?.phone}}</div>

          <div style="padding: 10px 0;">活动开始时间:{{orderInfoData?.activity_time}}</div>
          <div style="padding: 10px 0;"> 活动截止时间:{{orderInfoData?.expire_time}}</div>

          <div style="padding: 10px 0;">当前状态:{{orderStatusFn(orderInfoData?.status)}}</div>
        </div>
      </el-card>
      <el-card class="box-card"
               shadow="never">
        <div slot="header"
             class="clearfix flex-between">
          <span>组队信息</span>

          <span v-if="orderInfoData.sex==1||orderInfoData.sex==0?orderInfoData.participants_number:(orderInfoData.woman_participants_number+orderInfoData.man_participants_number)"
                @click="allKickedOutFn(orderInfoData.id)">全部踢出</span>
        </div>
        <div v-if="orderInfoData?.join_data.length">
          <div class=""
               v-for="(item,index) in orderInfoData.join_data"
               :key="index">
            <div style="margin-bottom: 15px;"
                 class="flex-between padding20 border-bottom-ECECEC "
                 v-if="item.status==1">
              <div class="flex-start-center">
                <img class="img"
                     :src="item.avatar"
                     alt="">

                <div class="margin-left_10rpx">
                  <div class="font-weight">
                    {{item.nickname}}
                  </div>
                  <div class="flex">
                    <span style="margin-right: 10rpx;">加入时间：{{item.create_time}}</span>

                  </div>
                </div>
              </div>
              <div style="color: #8B8B8B;"
                   class="flex-start-center">
                <div class="">
                  已加入
                </div>
                <div class=""
                     @click="whoCanSeeIt(item.id)">

                  <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                      <img class="threePoints"
                           src="../../../../assets/组合 855.png"
                           alt="" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="item.id">踢掉此人</el-dropdown-item>
                      <!-- <el-dropdown-item :command="item.id">查看详情</el-dropdown-item> -->
                      <!-- <el-dropdown-item>私聊TA</el-dropdown-item> -->
                    </el-dropdown-menu>
                  </el-dropdown>

                </div>
              </div>
            </div>

          </div>

        </div>
      </el-card>

      <el-card class="box-card"
               v-if="orderInfoData?.status!=3"
               shadow="never">
        <div slot="header"
             class="clearfix">
          <span>状态更改</span>

          <span style="color: red;font-size: 12px; margin-left: 12px;">如果需要进行状态更改请做以下操作,否则不要轻易进行更改</span>
        </div>
        <div v-if="orderInfoData.status==4"
             style="color: red;">该状态已过期请前台进行编辑后台重新进行审核</div>
        <el-radio-group v-model="radio"
                        v-if="orderInfoData.status!=7"
                        @input="inputChange">
          <el-radio :label="2"
                    v-if="orderInfoData.status==1">审核通过</el-radio>
          <el-radio :label="3"
                    v-if="orderInfoData.status==2">下架</el-radio>
          <el-radio :label="7"
                    v-if="orderInfoData.status==1">驳回</el-radio>
        </el-radio-group>
        <div>
          <el-input v-if="showTextarea"
                    :disabled="orderInfoData.status==7?true:false"
                    type="textarea"
                    resize="none"
                    placeholder="请输入内容"
                    v-model="remark">
          </el-input>
        </div>
      </el-card>

      <div v-if="orderInfoData && ![7, 5,3, 4, 6].includes(orderInfoData.status)"
           class="drawer__footer"
           :style="{marginTop:!(radio==7)?'100px':''}">
        <el-button round
                   type="plain"
                   @click="handleClose"
                   size="medium">返回</el-button>
        <el-button type="primary"
                   round
                   :loading="loading"
                   size="medium"
                   @click="save">确定</el-button>
      </div>
    </el-drawer>
    <el-dialog title="提示"
               :visible.sync="dialogVisibleAllKicked"
               width="30%"
               :before-close="handleClose">
      <span>是否要一键踢出全部</span>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisibleAllKicked = false">取 消</el-button>
        <el-button type="primary"
                   @click="allKickedFn()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 图片预览 -->
    <el-image-viewer v-if="viewerVisible"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="imgViewArr" />
    <el-button type="text"></el-button>
  </div>

</template>

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import TinymceEditor from '@/components/TinymceEditor/index.vue';
// import {
//   userOssSignature,
//   qnyOssSignature
// } from '@/api/creatCenter/material';
// import { storageConfigDetail } from '@/api/storageInfo/index';

// import axios from 'axios';
// import {
//   siteCategoriesInsert,
//   siteCategoriesList,
//   siteCategoriesModify,
//   siteCategoriesDetail
// } from '@/api/serviceManagement/categoriesList';
import { upload } from '@/api/saveImg/index'
import { updateDaziStatus, kickUser, kickAllUser } from '@/api/dazi/index'

export default {
  name: 'pictureEdit',
  components: { ElImageViewer, TinymceEditor },
  props: {
    drawerEditBoolen: {
      type: Boolean,
      default: false
    },
    // 修改回显的数据
    data: Object
  },
  data () {



    // const categoryImage = (rule, value, callback) => {
    //   console.log(this.form.img);
    //   if (!this.form.img) {
    //     callback(new Error('请上传图片'));
    //   } else {
    //     callback();
    //   }
    // };
    const DEFAULT_FORM = {
      // 等级名称
      name: '',
      //   描述
      desc: '',
      // 0 普通会员  1 vip会员
      level: '1',
      //  价格
      price: '',
      // 有效期
      effective_time: '',
      // 搭子数量
      dazi_number: '',
      // 圈子数量
      circle_number: '',
      // 服务数量
      service_number: '',
      // 社群数量
      community_number: ''


    };
    return {
      editorConfig: {
        height: 525,
        relative_urls: false,
        convert_urls: false,

        images_upload_handler: async (blobInfo, success) => {
          //  ==================================

          const files = blobInfo.blob();
          // 使用 axios 上传，实际开发这段建议写在 api 中再调用 api
          const param = new FormData();

          param.append('file', files, files.name);

          const res = await upload(param);
          console.log(res.data.url);

          success(res.data.url);

          // });
        }
      },
      dialogVisibleAllKicked: false,
      configBS: JSON.parse(localStorage.getItem('config')),
      radio: 2,
      storageMode: 2,
      options: [],
      imageUrl: '',
      imgViewArr: [],
      viewerVisible: false,
      // 表单数据
      form: { ...DEFAULT_FORM },
      dialogImageUrl: '',
      fileList: [],
      dialogVisible: false,
      // 表单验证规则
      rules: {
        name: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ],


        desc: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }
        ],
        effective_time: [
          {
            required: true,
            message: '请输入有效时间',
            trigger: 'blur'
          }
        ],
        dazi_number: [
          {
            required: true,
            message: '请输入搭子数量',
            trigger: 'blur'
          }
        ],
        circle_number: [
          {
            required: true,
            message: '请输入圈子数量',
            trigger: 'blur'
          }
        ],
        service_number: [
          {
            required: true,
            message: '请输入服务数量',
            trigger: 'blur'
          }
        ],
        community_number: [
          {
            required: true,
            message: '请输入社群数量',
            trigger: 'blur'
          }
        ],
        // // 站点 图片上传
        // img: [
        //   { required: true, validator: categoryImage, trigger: 'change' }
        // ]
      },
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      showChoose: false,
      orderInfoData: null,
      showTextarea: false,
      textarea: '',
      remark: '',
      status: 2,
      allKickedId: '',

    };
  },
  activated () {

  },
  computed: {
    orderStatusFn: function () {
      return function (status) {

        let orderStatus = '';
        // status订单状态（0.待付款 1.待接单 2.已接单 3.服务中 4.已完成 5.已取消/退款)
        orderStatus =
          status == 0 ? '全部' : status == 1 ? '待审核' : status == 2 ? '上架' : status == 3 ? '下架' : status == 4 ? '过期' : status == 5 ? "完成" : status == 6 ? '删除' : '驳回';

        return orderStatus;
      };
    },

  },
  methods: {
    imgScare (imgStr) {
      console.log(imgStr);
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.viewerVisible = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },

    async allKickedFn () {

      const res = await kickAllUser({
        id: this.allKickedId
      });
      console.log(res)

      if (res.code == 0) {
        this.$message({
          type: 'success',
          message: '全部踢人成功'
        });
        this.handleClose();
        this.$emit('done');
        this.dialogVisibleAllKicked = false
      }
    },
    allKickedOutFn (id) {
      this.allKickedId = id
      this.dialogVisibleAllKicked = true
    },
    open (id) {
      this.$confirm('此操作将会踢出参与人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {

        const res = await kickUser({
          id: id
        });
        console.log(res)

        this.$message({
          type: 'success',
          message: '踢人成功'
        });
        this.handleClose();
        this.$emit('done');

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消踢人'
        });
      });
    },
    async handleCommand (command) {
      this.open(command)



      //   this.$message('click on item ' + command);
    },
    inputChange (e) {
      console.log(e)
      if (e == 7) {
        this.showTextarea = true
        this.status = e

      } else {

        this.showTextarea = false
        this.status = e
        this.remark = null


      }
    },
    // 关闭抽屉
    handleClose () {
      console.log('查看详情');
      this.$emit('update:drawerEditBoolen', false);
    },
    // 获取存储配置
    // async storageConfig () {
    //   const res = await storageConfigDetail();

    //   // console.log(res.storageMode);

    //   this.storageMode = res?.storageMode;
    // },
    // 关闭查看器
    closeViewer () {
      this.viewerVisible = false;
    },
    // 下载图片
    handleDownload (file) {
      window.open(file.url);
    },
    // 删除图片
    handleRemove () {
      this.fileList = [];
      this.imageUrl = '';
      this.form.img = this.imageUrl;
    },
    //  图片上传个数超过限制
    exceedFn () {
      this.$message({
        message: '图片上传已达到上限,请删除后再上传',
        type: 'warning'
      });
    },
    handlePictureCardPreview () {
      const imgStr = this.imageUrl;
      console.log(imgStr);
      if (imgStr.length) {
        if (imgStr.includes(',')) {
          console.log('字符串中包含逗号');
          // 包含的进行slice(',') 分割

          this.imgViewArr = imgStr.split(',').map((item) => item.trim());
        } else {
          console.log('字符串中不包含逗号');
          this.imgViewArr = imgStr.split();
        }

        this.viewerVisible = true;
      } else {
        this.$message({
          message: '没有上传图片无法进行预览',
          type: 'warning'
        });
      }
    },

    async handleFileChange (file) {

      this.aliFn(file)
    },
    // 阿里云
    async aliFn (file) {
      this.loading = true;

      let files = file.raw;

      console.log(files)
      // 构建请求参数
      let params = new FormData();
      console.log(params);

      //   params.append('signature', '132321313');
      params.append('file', files);
      console.log(params);

      //   let config = {
      //     headers: {
      //       'Access-Control-Allow-Origin': '*',
      //       'x-oss-callback-Authorization': getToken()
      //     }
      //   };

      const res = await upload(params);
      //   let result = await axios.post(res.host, param, config);
      //   let url = res.host + '/' + date + suffix;
      console.log(res);
      if (res.code == 0) {
        this.form.img = res.data.url
        this.loading = false;
      }
      //   this.form.categoryImages = url;
      //   this.imageUrl = url;
      //   this.loading = false;
    },

    /* 保存编辑 */
    save () {
      // 判断如果下架之前需要判断当前是否还有参与人员
      const join_data = this.orderInfoData.join_data.filter(item => item.status == 1);
      console.log(join_data)
      if (join_data.length) {
        this.$message({
          message: '当前搭子还有参加人员请踢掉所有人方可下架',
          type: 'warning'
        });


      } else {
        this.loading = true;
        console.log(this.status)
        this.status = this.radio
        const saveOrUpdate = updateDaziStatus
        saveOrUpdate({
          status: this.status,
          id: this.orderInfoData.id,
          remark: this.remark
        })
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg.message);

            this.handleClose();
            this.$emit('done');
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      }


    }
    /* 更新visible */
  },
  watch: {
    drawerEditBoolen (visible) {
      this.$nextTick(async () => {
        if (visible) {
          console.log(this.data);
          if (this.data) {
            this.orderInfoData = this.data

            // const res = await daziInfo({ id: this.data.id });

            // console.log(res)

            if (this.data.status == 7) {
              this.radio = 7
              this.remark = this.data.remark
              this.showTextarea = true
            } else {
              //   this.status=this.data.status
              this.radio = 2
              this.remark = null
              this.showTextarea = false
            }
            if (this.orderInfoData.img.includes(',')) {
              // 包含的进行slice(',') 分割

              this.orderInfoData.img = this.orderInfoData.img
                .split(',')
                .map((item) => item.trim());
            } else {
              if (this.orderInfoData.img.length) {
                this.orderInfoData.img = [this.orderInfoData.img];
              } else {
                this.orderInfoData.img = [];
              }
            }
            if (this.orderInfoData.cover_img.includes(',')) {
              // 包含的进行slice(',') 分割

              this.orderInfoData.cover_img = this.orderInfoData.cover_img
                .split(',')
                .map((item) => item.trim());
            } else {
              if (this.orderInfoData.cover_img.length) {
                this.orderInfoData.cover_img = [this.orderInfoData.cover_img];
              } else {
                this.orderInfoData.cover_img = [];
              }
            }
            console.log(this.orderInfoData.cover_img, 'cover_img')
            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.lifeImg {
  width: 90px;
  height: 90px;
  padding: 10px 10px 10px 0px;
}
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
/deep/.el-textarea__inner {
  margin-top: 20px;
  min-height: 150px !important;
}
.avaterName {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  vertical-align: middle;
  //   margin-right: 5px;
}
.img {
  width: 42px;
  height: 42px;
  margin-right: 10px;
}

.threePoints {
  width: 16px;
  height: 16px;
}
.foodsDiv div {
  margin-left: 20px;
  margin-top: 10px;
}
.height83 {
  height: 83vh;
}
.hLabel {
  margin: 10px 0 20px;
  font-weight: 700;
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;

    margin-right: 5px;
    height: 23px;
    width: 6px;
    background-color: #1e6ceb;
  }
}
.drawer__footer {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
}
</style>
